import { useStatesContext } from '../index'
import { useNavigate } from 'react-router-dom'
export default function SelectVideoSource(): React.JSX.Element {
  const context = useStatesContext()
  const navigate = useNavigate()
  console.log('context', context)
  const { windowScreenSource } = context.states
  const handleClick = (item: any) => {
    // 选择录制哪块屏幕
    window.electron.ipcRenderer.send(
      'open:recording:video',
      JSON.stringify({
        type: 'screen',
        devices: item
      })
    )
  }
  return (
    <div className="w-full h-full flex bg-[var(--color-background)] p-[10px] gap-[10.5px] flex-wrap relative overflow-auto">
      {windowScreenSource
        .filter((_, index) => index <= 6)
        .map((source) => (
          <div
            key={source.id}
            className="group w-[108px] h-[97px] rounded-[5px] overflow-hidden relative hover:scale-[0.9] border-1 border-[#59c79d] hover:bg-[#59c79d] transition-all duration-300"
            onClick={() => handleClick(source)}
          >
            <img src={source.base64} className="w-full h-full object-contain" />
            <p className="text-[#59c79d] text-[12px] absolute bottom-px w-full text-center group-hover:text-[#fff]">
              {source.name}
            </p>
          </div>
        ))}
      <div
        className="absolute m-[0px] w-[80px] h-[30px] box-border border-1 border-[#eee] 
      text-center leading-[30px] bottom-[45px] right-[0px] rounded-tl-[10px] cursor-pointer
      hover:border-[#59c79d] hover:text-[#fff]
      transition-all duration-300
      "
      >
        <p>more</p>
      </div>
      <div
        className="absolute m-[0px] w-[80px] h-[30px] box-border border-1 border-[#eee] 
      text-center leading-[30px] bottom-[5px] right-[0px] rounded-bl-[10px] cursor-pointer
      hover:border-[#59c79d] hover:text-[#fff]
      transition-all duration-300
      "
        onClick={() => {
          navigate(-1)
        }}
      >
        <p>back</p>
      </div>
    </div>
  )
}
